/**
 * 入参
    type： 1- 指令   2-簿记
    onOk：指令下达成功或簿记成功抛出事件
    onCancel：取消抛出事件

*/
import React, { PureComponent } from 'react';
import { AvailableAssetC, TradeHoldC, FirstHeaderC } from '../../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Tabs } from 'antd';
import style from './index.less';
import FuturesInfoC from './futuresInfoC';
import MarketInfoC from './marketInfoC';

import AddOrderC from './addOrder';

import { connect } from 'dva';
import 'moment/locale/zh-cn';
import moment from 'moment';
@Form.create()
@connect(({ userM: user, loading }) => ({
  user,
  loading,
}))
export default class AddStockIndex extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      money: {}, //资金
      portfolio: undefined, //当前组合
      position: {}, //每行的持仓数据
      tradingcode: undefined, //当前证券代码 {exchangecode: "101", tradingcode: "510060", secuabbr: "上证中央企业50ETF"}
      futuresInfo: {}, //合约信息
      holdData: [], //持仓的表格数据
    };
  }

  //组合变更id 切换
  portfolioOnChange = (e) => {
    if (this.state.portfolio !== e) {
      //组合id不同则变更当前页面组合id
      this.setState({
        portfolio: e,
      });
    }
  };
  //证券代码变更
  tradingcodeOnChange = (e) => {
    if (this.state.tradingcode !== e) {
      //证券代码不同则变更当前页面证券代码
      this.setState({
        tradingcode: e,
      });
    }
  };
  //新建指令和簿记成功之后调用
  onOk = () => {
    this.props.onOk();
  };

  render() {
    const { portfolio, tradingcode } = this.state;
    const { loading, type } = this.props;

    return (
      <div className={style.AddStockIndex}>
        <div>
          <div>
            <FirstHeaderC title={'期货合约信息'} />
            <FuturesInfoC
              tradingcode={tradingcode && tradingcode.tradingCode ? tradingcode.tradingCode : undefined}
              exchangecode={tradingcode && tradingcode.exchangeCode ? tradingcode.exchangeCode : undefined}
              onChange={(info) => {
                this.setState({
                  futuresInfo: {
                    //contractMultiplie:xx，marginMoneyD:xxx,marginMoneyK:xxx （合约乘数,保证金比例多头 空头）
                    contractMultiplie: info.contractMultiplie, //合约乘数,
                    marginMoneyD: info.marginMoneyD, //保证金比例多头
                    marginMoneyK: info.marginMoneyK, //保证金比例空头
                    chinaName: info.chiname, //证券代码名称
                  },
                });
              }}
            />
          </div>
          <div>
            <div style={{ marginTop: '16px' }}>
              <FirstHeaderC title={'行情信息'} />
            </div>
            <MarketInfoC
              tradingcode={tradingcode && tradingcode.tradingCode ? tradingcode.tradingCode : undefined}
              exchangecode={tradingcode && tradingcode.exchangeCode ? tradingcode.exchangeCode : undefined}
            />
          </div>
        </div>
        <div>
          <div style={{ marginBottom: '16px' }}>
            <AvailableAssetC
              portfolio={portfolio}
              hkType={3}
              onChange={(e) => {
                this.setState({
                  money: e,
                });
              }}
            />
          </div>
          <div style={{ marginBottom: '16px' }}>
            <TradeHoldC
              hkType={3}
              portfolio={portfolio}
              codeChangeInfo={(e) => {
                this.setState({
                  position: { ...e },
                });
                this.tradingcodeOnChange(e ? { tradingCode: e.tradingCode, exchangeCode: e.exchangeCode } : e);
              }}
              onChange={(e) => this.setState({ holdData: e || [] })}
            />
          </div>
          <FirstHeaderC title={'交易要素'} />
          <AddOrderC
            type={this.props.type}
            portfolioOnChange={this.portfolioOnChange}
            tradingcodeOnChange={this.tradingcodeOnChange}
            onRef={(ref) => {
              this.addOrder = ref;
            }}
            onOk={this.onOk}
            money={this.state.money}
            position={this.state.position}
            futuresInfo={this.state.futuresInfo}
            holdData={this.state.holdData}
          />
        </div>
      </div>
    );
  }
}
